// 导航管理模块
class DevToolsNavigation {
    constructor(router) {
        this.router = router;
        this.init();
    }

    init() {
        this.initSidebarNavigation();
        this.initSearch();
        this.initCategoryFilter();
    }

    initSidebarNavigation() {
        // 侧边栏工具切换
        const sidebarLinks = document.querySelectorAll('.sidebar-tool');
        sidebarLinks.forEach(link => {
            link.addEventListener('click', (e) => {
                e.preventDefault();
                const toolId = link.getAttribute('data-tool');
                this.router.switchTool(toolId);
            });
        });
    }

    initSearch() {
        // 搜索功能
        const searchInput = document.getElementById('search-input');
        if (searchInput) {
            searchInput.addEventListener('input', 
                DevToolsUtils.debounce((e) => {
                    this.searchTools(e.target.value);
                }, 300)
            );
        }
    }

    updateActiveState(toolId) {
        // 更新侧边栏激活状态
        document.querySelectorAll('.sidebar-tool').forEach(link => {
            link.classList.remove('active-tool');
        });
        
        const activeLink = document.querySelector(`[data-tool="${toolId}"]`);
        if (activeLink) {
            activeLink.classList.add('active-tool');
        }
    }

    initCategoryFilter() {
        // 分类过滤功能
        const filterButtons = document.querySelectorAll('.filter-btn');
        
        filterButtons.forEach(button => {
            button.addEventListener('click', (e) => {
                const filterType = e.target.getAttribute('data-filter');
                this.filterTools(filterType);
                
                // 更新按钮状态
                filterButtons.forEach(btn => {
                    btn.classList.remove('bg-blue-500', 'text-white');
                    btn.classList.add('text-gray-600', 'hover:bg-gray-200');
                });
                
                e.target.classList.remove('text-gray-600', 'hover:bg-gray-200');
                e.target.classList.add('bg-blue-500', 'text-white');
            });
        });
    }

    filterTools(filterType) {
        const toolCategories = document.querySelectorAll('.tool-category');
        const categoryHeaders = document.querySelectorAll('.text-lg.font-semibold.text-gray-700');
        const sidebarTools = document.querySelectorAll('.sidebar-tool');
        
        if (filterType === 'all') {
            // 显示所有工具和分类
            toolCategories.forEach(category => {
                category.style.display = 'block';
            });
            categoryHeaders.forEach(header => {
                header.style.display = 'flex';
            });
            sidebarTools.forEach(tool => {
                tool.style.display = 'flex';
            });
        } else if (filterType === 'favorite') {
            // 只显示常用工具
            sidebarTools.forEach(tool => {
                const isFavorite = tool.getAttribute('data-favorite') === 'true';
                if (isFavorite) {
                    tool.style.display = 'flex';
                } else {
                    tool.style.display = 'none';
                }
            });
            
            // 检查每个分类是否有可见的工具
            toolCategories.forEach((category, index) => {
                const visibleTools = category.querySelectorAll('.sidebar-tool[style*="flex"]');
                const header = categoryHeaders[index];
                
                if (visibleTools.length > 0) {
                    category.style.display = 'block';
                    if (header) header.style.display = 'flex';
                } else {
                    category.style.display = 'none';
                    if (header) header.style.display = 'none';
                }
            });
        }
    }

    searchTools(searchTerm) {
        const sidebarTools = document.querySelectorAll('.sidebar-tool');
        const toolCategories = document.querySelectorAll('.tool-category');
        const categoryHeaders = document.querySelectorAll('.text-lg.font-semibold.text-gray-700');
        
        if (searchTerm === '') {
            // 如果搜索为空，恢复当前过滤状态
            const activeFilter = document.querySelector('.filter-btn.bg-blue-500');
            const filterType = activeFilter ? activeFilter.getAttribute('data-filter') : 'all';
            this.filterTools(filterType);
            return;
        }
        
        sidebarTools.forEach(tool => {
            const toolText = tool.textContent.toLowerCase();
            const toolId = tool.getAttribute('data-tool');
            
            if (toolText.includes(searchTerm.toLowerCase()) || 
                toolId.includes(searchTerm.toLowerCase())) {
                tool.style.display = 'flex';
            } else {
                tool.style.display = 'none';
            }
        });
        
        // 根据搜索结果显示/隐藏分类标题
        toolCategories.forEach((category, index) => {
            const visibleTools = category.querySelectorAll('.sidebar-tool[style*="flex"]');
            const header = categoryHeaders[index];
            
            if (visibleTools.length > 0) {
                category.style.display = 'block';
                if (header) header.style.display = 'flex';
            } else {
                category.style.display = 'none';
                if (header) header.style.display = 'none';
            }
        });
    }
}